"use client"

import { useState } from "react"

export default function SimplePreview() {
  const [readingMode, setReadingMode] = useState("ancient") // "ancient" or "modern"
  const [currentPage, setCurrentPage] = useState(1)
  const totalPages = 5

  // Sample data
  const originalChars = Array.from({ length: 20 }, (_, i) => ({
    id: `orig-${i}`,
    content: `原字${i + 1}`,
  }))

  const typesetChars = Array.from({ length: 20 }, (_, i) => ({
    id: `type-${i}`,
    content: `排字${i + 1}`,
    status: i < 7 ? (i === 3 ? "problem" : "confirmed") : i === 6 ? "skipped" : i === 19 ? "inserted" : "",
  }))

  const toggleReadingMode = () => {
    setReadingMode((prev) => (prev === "ancient" ? "modern" : "ancient"))
  }

  const goToPrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage((prev) => prev - 1)
    }
  }

  const goToNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage((prev) => prev + 1)
    }
  }

  return (
    <div className="min-h-screen bg-ancient-scroll font-ancient text-ancient-text">
      {/* Header */}
      <header className="bg-ancient-card/90 backdrop-blur-sm border-b border-amber-brown/30 p-3">
        <div className="container mx-auto max-w-5xl">
          <div className="flex flex-wrap items-center justify-between gap-2">
            <div className="flex items-center gap-3 flex-wrap">
              <h1 className="text-lg font-bold text-amber-brown">《般若波罗蜜多心经》校对</h1>
              <div className="text-sm text-ancient-text/70 border-l border-amber-brown/30 pl-3">
                任务编号: BNJ-22-05
              </div>
            </div>
            <div className="flex items-center gap-3">
              <div className="text-sm text-ancient-text/70">项目进度: 42/108页 (38%)</div>
              <div className="w-24 md:w-32 bg-ancient-scroll/50 h-2 rounded-full overflow-hidden">
                <div className="bg-amber-brown h-full" style={{ width: "38%" }}></div>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Main content */}
      <div className="flex flex-row h-[calc(100vh-220px)]">
        {/* Original text */}
        <div className="w-1/2 border-r border-amber-brown/30 p-4">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-bold text-amber-brown text-center">原文</h2>
            <div className="flex items-center gap-2">
              <div className="text-sm text-ancient-text/70">
                {currentPage}/{totalPages}
              </div>
              <button
                onClick={toggleReadingMode}
                className="w-8 h-8 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-amber-brown rounded-md"
              >
                {readingMode === "ancient" ? "格" : "书"}
              </button>
            </div>
          </div>
          <div
            className={`grid gap-2 grid-cols-5 h-[calc(100%-40px)] p-2 ${readingMode === "ancient" ? "ancient-mode" : ""}`}
          >
            {originalChars.map((char, index) => (
              <div
                key={char.id}
                className={`border border-amber-brown/30 bg-ancient-card/80 text-lg font-medium relative flex items-center justify-center w-14 h-14 ${
                  index === 7 ? "ring-2 ring-amber-brown bg-amber-brown/20" : ""
                }`}
                style={readingMode === "ancient" ? { writingMode: "vertical-rl" } : {}}
              >
                <div className="relative w-full h-full flex items-center justify-center">
                  <img src="/images/origin01.png" alt="原字" className="max-w-full max-h-full" />
                  <span className="absolute bottom-0 right-0 text-xs bg-ancient-scroll/70 px-1 rounded-sm">
                    {char.content.replace(/原字/, "")}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Proofread text */}
        <div className="w-1/2 p-4">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-bold text-amber-brown text-center">校对</h2>
            <div className="flex items-center gap-2">
              <div className="text-sm text-ancient-text/70">
                {currentPage}/{totalPages}
              </div>
              <button
                onClick={toggleReadingMode}
                className="w-8 h-8 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-amber-brown rounded-md"
              >
                {readingMode === "ancient" ? "格" : "书"}
              </button>
            </div>
          </div>
          <div
            className={`grid gap-2 grid-cols-5 h-[calc(100%-40px)] p-2 ${readingMode === "ancient" ? "ancient-mode" : ""}`}
          >
            {typesetChars.map((char, index) => (
              <div
                key={char.id}
                className={`border border-amber-brown/30 bg-ancient-card/80 text-lg font-medium relative flex items-center justify-center w-14 h-14 ${
                  index === 7 ? "ring-2 ring-amber-brown bg-amber-brown/20" : ""
                } ${char.status === "skipped" ? "opacity-50" : ""} ${char.status === "inserted" ? "border-purple-500 border-2" : ""}`}
                style={readingMode === "ancient" ? { writingMode: "vertical-rl" } : {}}
              >
                {char.status === "confirmed" && (
                  <div className="absolute inset-0 bg-green-500/30 flex items-center justify-center">
                    <span className="text-green-700">✓</span>
                  </div>
                )}
                {char.status === "problem" && (
                  <div className="absolute inset-0 bg-yellow-500/30 flex items-center justify-center">
                    <span className="text-yellow-700">?</span>
                  </div>
                )}
                {char.status === "skipped" && (
                  <div className="absolute inset-0 bg-blue-500/30 flex items-center justify-center">
                    <span className="text-blue-700">→</span>
                  </div>
                )}
                <div className="relative w-full h-full flex items-center justify-center">
                  <img src="/images/final01.png" alt="排字" className="max-w-full max-h-full" />
                  <span className="absolute bottom-0 right-0 text-xs bg-ancient-scroll/70 px-1 rounded-sm">
                    {char.content.replace(/排字/, "")}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Toolbar */}
      <div className="fixed bottom-[60px] left-0 right-0 border-t border-amber-brown/30 bg-ancient-card/90 backdrop-blur-sm p-3 flex flex-col md:flex-row justify-between items-center gap-3">
        <div className="flex justify-center gap-3">
          <button
            onClick={goToPrevPage}
            disabled={currentPage <= 1}
            className="w-9 h-9 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-amber-brown rounded-md disabled:opacity-50"
          >
            ←
          </button>
          <div className="flex items-center justify-center min-w-[4rem] text-sm">
            {currentPage}/{totalPages}
          </div>
          <button
            onClick={goToNextPage}
            disabled={currentPage >= totalPages}
            className="w-9 h-9 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-amber-brown rounded-md disabled:opacity-50"
          >
            →
          </button>
          <button className="w-9 h-9 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-green-600 rounded-md">
            ✓
          </button>
          <button className="w-9 h-9 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-yellow-600 rounded-md">
            ?
          </button>
          <button className="w-9 h-9 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-blue-600 rounded-md">
            →
          </button>
          <button className="w-9 h-9 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-purple-600 rounded-md">
            +
          </button>
          <button className="w-9 h-9 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-amber-brown rounded-md">
            ↩
          </button>
        </div>

        <div className="flex items-center gap-3 w-full md:w-auto">
          <div className="text-sm whitespace-nowrap">45/100</div>
          <div className="w-full md:w-48 flex-1 bg-ancient-scroll/50 h-2 rounded-full overflow-hidden">
            <div className="bg-amber-brown h-full" style={{ width: "45%" }}></div>
          </div>
          <div className="text-sm whitespace-nowrap">45%</div>
          <button className="w-9 h-9 flex items-center justify-center border border-amber-brown/30 bg-ancient-scroll/10 text-amber-brown rounded-md">
            📄
          </button>
        </div>
      </div>

      {/* Bottom navigation */}
      <div className="fixed bottom-0 left-0 right-0 border-t border-amber-brown/30 bg-ancient-card/90 backdrop-blur-sm z-10">
        <div className="flex justify-around">
          <button className="flex-1 flex flex-col items-center py-2 md:py-3 text-amber-brown bg-amber-brown/10">
            <span>📖</span>
            <span className="text-xs mt-1">精进</span>
          </button>
          <button className="flex-1 flex flex-col items-center py-2 md:py-3 text-ancient-text/70 hover:bg-amber-brown/5">
            <span>❤️</span>
            <span className="text-xs mt-1">随喜</span>
          </button>
          <button className="flex-1 flex flex-col items-center py-2 md:py-3 text-ancient-text/70 hover:bg-amber-brown/5">
            <span>👤</span>
            <span className="text-xs mt-1">我执</span>
          </button>
        </div>
      </div>

      <style jsx>{`
        .ancient-mode {
          /* CSS for ancient mode */
        }
      `}</style>
    </div>
  )
}
